<template>
  <div class="container">
    <div class="table">
      <div class="table-tr" v-for="(item, index) in list" :key="index" @click="handleItemClick(item)">
        <div class="table-td col-1st">
          <img :src="factions[item.faction].image2" mode="aspectFit">
          <div class="deckName">
            <p class="cname">{{item.cname}}</p>
            <p class="ename">{{item.deck_name}}</p>
          </div>
        </div>
        <div class="table-td" v-if="last_30_days"><span>{{item.real_game_count}}</span></div>
        <div class="table-td" v-else><span>{{item.game_count}}</span></div>
        <div class="table-td icons">
          <img :src="dustImage" mode="aspectFit">
          <span>{{item.dust_cost}}</span>
        </div>
        <div v-if="last_30_days && item.real_win_rate" class="table-td col-last" :class="{'color-green': item.real_win_rate>50, 'color-red': item.real_win_rate<50}">
          <span>{{item.real_win_rate}}%</span>
        </div>
        <div v-else class="table-td col-last" :class="{'color-green': item.win_rate>=50, 'color-red': item.win_rate<50}">
          <span>{{item.win_rate}}%</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import utils from '@/utils'
  import ZanLoadmore from '@/components/loadmore'

  export default {
    name: 'DecksBoard',
    props: ['list', 'last_30_days', 'loading', 'nodata'],
    components: {
      ZanLoadmore
    },
    data() {
      return {
        deckName: [],
        dustImage: utils.image.dustImage,
        scrollTop: 0
      }
    },
    computed: {
      ...mapGetters([
        'decksName',
        'winWidth',
        'winHeight'
      ]),
      factions() {
        return utils.faction
      }
    },
    methods: {
      handleItemClick(item) {
        this.$emit('itemClick', item)
      },
      scrollToBottom(e) {
        // console.log('scroll to bottom', e)
        this.$emit('scrollToBottom')
      },
      scrollToTop(e) {
        // console.log('scroll to top', e)
        this.$emit('scrollToTop')
      },
    },
    watch: {
      last_30_days(val1, val2) {
        console.log(val1, val2)
      },
    }
  }
</script>
<style lang="scss" scoped>
  .container{
    overflow:scroll;
  }
  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    .table-tr {
      display: table-row;
      width: 100%;
      background-color: #fff;
      border-bottom:1rpx solid #eee;
      &:active  {
        background: #eee;
      }
      .table-td {
        display: table-cell;
        position: relative;
        width: 130rpx;
        height: 120rpx;
        line-height: 120rpx;
        text-align: center;
        span {
          font-size: 13px;
        }
      }
      .col-1st {
        position: relative;
        width: 300rpx;
        text-align: left;
        box-sizing: border-box;
        padding-left: 30rpx;
        img {
          position: absolute;
          width: 70rpx;
          height: 70rpx;
          top: 50%;
          transform: translateY(-50%);
        }
        .deckName {
          position: absolute;
          display: inline-block;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 90rpx;
          p.cname {
            font-size: 13px;
            color: #333333;
            height: 37rpx;
            line-height: 37rpx;
          }
          p.ename {
            width:180rpx;
            height: 30rpx;
            line-height: 30rpx;
            font-size: 11px;
            color: #999;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
      .icons {
        img {
          position: absolute;
          width: 23rpx;
          height: 32rpx;
          top: 50%;
          transform: translateY(-50%);
        }
        span {
          margin-left: 28rpx;
        }
      }
      .col-last {
        font-weight: bold;
        padding-right: 30rpx;
      }
    }
  }
</style>
